Parts of layout 佈局

大部分產品的佈局分為導航和主體

Windows 視窗

視窗是應用介面的框架，分為導航區域和主體區域。多視窗檢視是一種系統使用者介面功能，用於同時顯示多個應用程式。

• 導航區域 – 負責選單和導航。

• 主體區域 – 負責顯示內容。

• 多視窗模式可以同時顯示多個應用，提高多工能力。

Navigation Region 導航區域

導航區域包含主要的導航元件和元素。導航區域用於頁面切換和操作，通常位於視窗的邊緣：

• 導航抽屜 – 側邊選單，列出主要頁面。

• 導航軌 – 適用於大屏裝置的垂直導航欄。

• 導航欄 – 位於螢幕底部的導航控制元件。

• 對於從左到右（LTR）的語言，放在左側；對於從右到左（RTL）的語言，放在右側。

Body Region 主體區域

圖片（Images） – 展示視覺資訊，如產品照片或插圖。

文字（Text） – 用於描述資訊，如標題、段落或標籤。

列表（Lists） – 組織和展示多條資料，如聯絡人列表。

卡片（Cards） – 組合相關資訊，如新聞卡片或產品展示。

按鈕（Buttons） – 觸發操作，如提交或導航。

應用欄（App Bar） – 顯示頁面標題或重要操作按鈕。

搜尋欄（Search Bar） – 提供搜尋功能，方便查詢內容。

Panes 面板

在 Material Design 中類似於現實世界中的玻璃窗格，用於構建裝置視窗中的主要內容區域。

• 所有內容必須放在面板中，一個佈局可以包含 1 到 3 個面板。

• 這些窗格會根據視窗尺寸類別和使用者的語言設定動態調整。對於從右到左（RTL）的語言，導航元件將位於右側。

• 使用者可以在面板之間切換，同時顯示多個面板可以提高操作效率。

Two-Pane Layout 雙面板佈局：雙面板佈局可以同時顯示兩個內容區，比如左側是列表，右側是詳細資訊。

Pane Types 面板有兩種型別

面板可以是固定的，也可以是可變的：

• 固定面板 – 寬度不會變，比如側邊欄。

• 靈活面板 – 會根據螢幕大小調整，比如主內容區。

• 至少要有一個靈活面板，這樣才能適應不同螢幕大小。

How Panes Adapt 面板如何適配

面板會根據螢幕空間自動調整佈局：空間充足時並排顯示，空間不足時會透過顯示隱藏、懸浮或重排等方式重組。面板會始終保持內容的上下文和含義。

Containment 面板的容納方式

在大多數裝置上，面板可以與背景融為一體，而其他面板則可以使用不同的顏色來突出顯示。這被稱為隱式分組，有助於顯示窗格之間的關係。

3D/XR 在空間環境中，面板使用容器顏色將面板與穿透區域或虛擬環境區分開來。

App bars 應用欄

1 面板可以包含“頂部應用欄”（Top App Bar）和“底部應用欄”（Bottom App Bar）用於顯示頁面標題、搜尋、導航或操作按鈕。

2 應用欄內的任何巢狀操作都應根據可用寬度進行隱藏或顯示。可能會根據螢幕寬度調整，螢幕小 – 可能隱藏部分按鈕。螢幕大 – 顯示更多功能選項。

3 切換單面板到雙面板時，不要隨意移動 UI 元素，以免影響使用者體驗。

Columns 列

面板中的內容可以顯示多列形式顯示，以便分段和對齊內容。列是面板獨有的，不在視窗層面使用。

Drag handle 拖拽手柄

拖拽手柄讓使用者可以調整面板大小，包括調整靈活面板寬度和摺疊展開固定面板，實現佈局切換。

Usage 使用

雙窗格佈局在大尺寸視窗中可自定義寬度並固定設定。推薦自動一寬度分別為
360dp和412dp。使用 dp 而不是 px（畫素），可以確保在不同裝置上，元素的視覺大小保持一致

在雙面板佈局中，拖動手柄放置在面板之間的間隔區域。

當一個面板完全展開時（例如全屏顯示），拖動手柄會位於左側或右側的邊緣，方便使用者恢復雙面板佈局。

拖動手柄的觸控區域（Touch Region A）優先順序高於系統返回手勢（Back Gesture B），確保使用者可以正確拖拽面板，而不會誤觸返回操作。

在“列表-詳情”佈局（List-Detail Layout）中，只有當使用者選擇某個專案時，拖動手柄才會出現，最佳化介面簡潔度。

避免自定義拖動手柄（Drag Handle）

如果產品不支援拖動手柄，可以考慮其他佈局切換方式：

切換按鈕（Toggle Button） – 允許使用者在不同佈局之間切換。

應用內佈局設定（In-App Layout Settings） – 在設定中提供手動調整選項。